<script setup lang="ts">
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions
} from "@pureadmin/utils";

const { isDark } = useDark();

const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "light";
});

const pieChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
  theme
});

setOptions({
  title: {
    text: "健康风险占比图",
    // subtext: "Fake Data",
    top: 10,
    left: 10
  },
  tooltip: {
    trigger: "item"
  },
  legend: {
    type: "scroll",
    bottom: 10,
    data: (function () {
      var list = [];
      for (var i = 1; i <= 28; i++) {
        list.push(i + 2000 + "");
      }
      return list;
    })()
  },
  visualMap: {
    top: "middle",
    right: 10,
    color: ["red", "yellow"],
    calculable: true
  },
  radar: {
    indicator: [
      { text: "心律变异", max: 400 },
      { text: "睡眠障碍风险", max: 400 },
      { text: "深睡时间", max: 400 },
      { text: "疲劳度预警", max: 400 },
      { text: "心率预警", max: 400 }
    ]
  },
  series: (function () {
    var series = [];
    for (var i = 1; i <= 28; i++) {
      series.push({
        type: "radar",
        symbol: "none",
        lineStyle: {
          width: 1
        },
        emphasis: {
          areaStyle: {
            color: "rgba(0,250,0,0.3)"
          }
        },
        data: [
          {
            value: [
              (40 - i) * 10,
              (38 - i) * 4 + 60,
              i * 5 + 10,
              i * 9,
              (i * i) / 2
            ],
            name: i + 0 + ""
          }
        ]
      });
    }
    return series as echarts.RadarSeriesOption;
  })()
});

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
  }
);
</script>

<template>
  <div ref="pieChartRef" style="width: 100%; height: 35vh" />
  <div class="mt-10">
    <p>
      <span style="font-weight: 800"> 健康风险评估</span><br />

      1、心脏疾病风险:
      高风险。李先生的心率偏高，心律变异偏低，这可能表示他有<span
        style="font-weight: 800; color: #2b8ae3"
        >心脏疾病的风险</span
      >。建议他进行进一步的心电图检查和心脏彩超。<br />
      2、睡眠障碍风险:
      中等风险。尽管李先生的睡眠总时间在正常范围内，但他的深睡时间较短，<span
        style="font-weight: 800; color: #2b8ae3"
        >可能存在睡眠质量问题。建议他调整睡眠习惯，</span
      >并在必要时寻求医生的帮助。<br />
      <span style="font-weight: 800; colro: red"> 健康预警</span><br />
      1、心率预警: 李先生的<span style="font-weight: 800; color: rgb(227 54 43)"
        >心率超过了正常范围，</span
      >可能存在心脏问题。建议他尽快就医。<br />
      2、心律变异预警:
      李先生的心律变异偏低，可能存在心律不齐的风险。建议他尽快进行心电图检查。<br />
      3、疲劳度预警:
      李先生的疲劳度较高，可能是睡眠质量、压力或其他健康问题的结果。<span
        style="font-weight: 800; color: #2b8ae3"
        >建议他调整生活方式，如增加运动、改善饮食和保证充足的休息。</span
      >
    </p>
  </div>
</template>
